メインコンテンツまでスキップ

AR Clip SDK

概要​

AR Clip を使うと、App Clip 経由で WebGL コンテンツを配信しながら、ARKit と WebAR³ の VPS エンジンでローカライズされた AR 体験を提供できます。Immersal スタイルにならい、要件 → インストール → シーン構築 → VPS 起動 → WebGL ビルドの順で進めます。

必要条件​

注意: Unity エディターでは多くの AR Clip API が Application.isEditor で無効化されています。実機での挙動を確認するには WebGL ビルドを作成し、AR Clip モバイルアプリでテストしてください。

パッケージの導入​

  1. Window → Package Manager を開きます。
  2. + → Add package from Git URL… をクリック。
  3. https://github.com/WebAR-Studio/arclip_sdk.git を入力して追加します。

インポート前に Assets/ARLib フォルダが残っている場合は削除し、重複シンボルエラーを回避してください。

error CS0433: The type 'ARLibTester' exists in both 'ARLib' and 'Assembly-CSharp'

サンプルのインポート​

Package Manager → AR Clip → Samples から次を追加します。

  • WebGLTemplates をインポートし、生成されたフォルダを Assets/ 直下にコピーして Project Settings → Player → WebGL Template から選択できるようにします。
  • TransparentBackground をインポートし、TransparentBackground.jslib を Assets/Plugins に移動して WebGL の透過レンダリングを有効にします。

シーンの準備​

  1. 空の GameObject ARClipController を作成します。
  2. ARLibController を追加し、renderCamera にカメラを割り当てます。
  3. カメラコンポーネントを無効化し、Clear Flags = Solid Color、背景色 RGBA(0,0,0,0) を設定します。
  4. （任意）サンプルに含まれる ARLibTester を追加して、エディターでイベントを擬似的に確認します。

最小構成のスクリプト​

using UnityEngine;
using ARLib;

public class ARClipBootstrap : MonoBehaviour
{
    [SerializeField] private Camera renderCamera;

    private void OnEnable()
    {
        ARLibController.Initialized += HandleInitialized;
        ARLibController.VPSPositionUpdated += HandleVpsPose;
    }

    private void OnDisable()
    {
        ARLibController.Initialized -= HandleInitialized;
        ARLibController.VPSPositionUpdated -= HandleVpsPose;
    }

    private void Start()
    {
        ARLibController.SetRenderCamera(renderCamera);
        ARLibController.Initialize();
    }

    private void HandleInitialized()
    {
        ARLibController.EnableCamera();
        ARLibController.EnableAR();
        ARLibController.EnableSurfaceTracking("horizontal");
    }

    private void HandleVpsPose(VPSPoseData pose)
    {
        Debug.Log($"VPS pose: {pose.Position}");
    }
}

VPS ローカライズを開始​

初期化後に VPS を設定し、ローカライズを開始します。

var settings = new VPSSettings
{
    apiKey = "your-api-key",
    locationIds = new[] { "your-location-id" }
};

ARLibController.SetupVPS(settings);
ARLibController.StartVPS();

監視すべき主なイベント：

  • ARLibController.VPSInitialized – VPS サブシステムの準備完了。
  • ARLibController.VPSPositionUpdated – ローカライズされたポーズを取得。
  • ARLibController.OnVPSErrorHappened – エラー内容を受信。

SetSendPhotoDelay や SetGpsAccuracyBarrier、SetFirstRequestDelay などのメソッドでリクエスト間隔を調整できます。

トラッキングモジュール​

  • 画像トラッキングを有効化する前に AddTrackingImage で画像を登録し、TrackedImagesArrayUpdate の通知で読み込み完了を確認します。
  • EnableSurfaceTracking("horizontal" | "vertical" | "both") で平面検出を開始し、結果は SurfaceTrackingUpdated で受け取ります。

ビルドとアップロード​

  1. WebGL テンプレートの選択: Project Settings → Player → WebGL → Resolution and Presentation でコピーしたテンプレートを指定します。
  2. ビルド: File → Build Settings → WebGL → Build を実行します。
  3. 圧縮: 生成されたビルドを ZIP 化し、index.html がルートにあることを確認します。
  4. アップロード: https://cdn.mobile.web-ar.studio/clip/pages/zip_uploader.html にアップロードします。
  5. テスト: 生成された QR コードを iOS 版 AR Clip アプリ (https://apps.apple.com/app/ar-clip/id6742754238) でスキャンして動作確認します。

トラブルシューティング​

  • カメラ映像が表示されない場合は、TransparentBackground.jslib が Assets/Plugins にあり、レンダーカメラが割り当て・無効化されているか確認してください。
  • エディターで AR イベントが届かないのは仕様です。ARLibTester を利用するか WebGL ビルドで検証してください。
  • 型の重複エラーが出る場合は、パッケージ導入前に古い ARLib フォルダを削除してください。